<script lang="ts" setup>
import { ref, defineEmits, defineExpose, defineProps } from "vue"
import useAppStore from "@/pinia"
const app = useAppStore()
import { useRouter } from "vue-router"
const router = useRouter()

const props = defineProps({
    type: {
        type: String,
        default: "single",
    },
})
const emit = defineEmits(["hide", "restart", "showSetting", "exit"])

const showPause = ref(false)

const show = () => {
    showPause.value = true
}
const hide = () => {
    emit("hide")
    showPause.value = false
}
const handleRestart = () => {
    showPause.value = false
    emit("restart")
}
const showSetting = () => {
    showPause.value = false
    emit("showSetting")
}
const exit = () => {
    showPause.value = false
    emit("exit")
}

const hover = () => {
    app.playSound("button_h")
}

const click = (type: string) => {
    app.playSound("button_c")
    if (type == "hide") hide()
    if (type == "showSetting") showSetting()
    if (type == "handleRestart") handleRestart()
    if (type == "exit") exit()
}

defineExpose({
    show,
    hide,
})
</script>

<template>
    <div v-if="showPause" class="tetrisPause flex justify-center items-center" @click="hide" @keydown.esc="hide">
        <div class="model flex items-center justify-evenly flex-col">
            <div @mouseover="hover" class="btn flex justify-center items-center un_select" @click.stop="click('hide')">CONTINUE</div>
            <!-- <div @mouseover="hover" class="btn flex justify-center items-center un_select" @click.stop="click('showSetting')">SETTING</div> -->
            <div @mouseover="hover" class="btn flex justify-center items-center un_select" @click.stop="click('handleRestart')">RESTART</div>
            <div v-if="props.type == 'single'" @mouseover="hover" class="btn flex justify-center items-center un_select" @click.stop="click('exit')">EXIT</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.tetrisPause {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    animation: mask 0.5s ease forwards;

    @keyframes mask {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 0.9;
        }
    }

    .model {
        width: 60vmin;
        height: 60vmin;

        .btn {
            width: 100%;
            font-size: 2.5vmin;
            font-weight: 700;
            padding: 3vmin 5vmin;
            border-radius: 0.4vmin;
            cursor: pointer;
            text-transform: uppercase;
            background-color: rgb(14, 14, 26, 0.05);
            color: rgb(234, 234, 234);
            transition: all 0.6s;
            box-shadow: 0px 0px 60px #1f4c65;
            -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));

            animation: button_in 0.4s ease forwards;
            position: relative;

            &::after {
                content: "";
                position: absolute;
                height: 100%;
                box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.2);
            }
        }

        .btn:active {
            scale: 0.92;
        }

        .btn:hover {
            background: rgb(2, 29, 78, 0.3);
            background: linear-gradient(315deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%);
            color: rgb(4, 4, 38);
            opacity: 0.8;
        }
    }

    @keyframes button_in {
        0% {
            opacity: 0;
            letter-spacing: -3vmin;
        }

        80% {
            opacity: 0.4;
            letter-spacing: 1.5vmin;
        }

        100% {
            opacity: 1;
            letter-spacing: 1.5vmin;
        }
    }
}
</style>
